<template>
<<<<<<< HEAD

  <div class="search">
<van-nav-bar
  title="搜索"
  left-arrow
  @click-left="$router.back()"
/>
    <div class="top">
      <svg class="icon" aria-hidden="true">
        <!-- <use xlink:href="#icon-sousuo"></use> -->           <!-- 这个是搜索图标 -->
      </svg>
      <input type="text" placeholder="请输入搜索内容" />
           <span @click="$router.back()">取消</span>
          <!-- <span>取消</span> -->
    </div>
    <div class="delhistory">

       <div>搜素历史</div>
      <div class="Alldel">
        <span>全部删除</span>
        <div class="delicon">                                                  
           <svg class="icon" aria-hidden="true">                  <!-- 这个是搜索图标 -->
            <!-- <use xlink:href="#icon-shanchu"></use> -->
          </svg>
        </div>
      </div>
    </div>
    <div class="conter">
    <p><a href="http://localhost:8080/#/">今日头条</a>   </p>

       <svg class="icon" aria-hidden="true">
        <!-- <use xlink:href="#icon-shanchu1"></use> -->            <!-- 这个是搜索图标 -->
      </svg>
=======
   <div >
 <van-nav-bar title="搜索" fixed placeholder z-index="999" left-arrow
      @click-left="$router.back()" />
    <van-search
      :placeholder="hotWord"
      @search="onSearch"
      @cancel="$router.back()"
      @input="onInput"
      show-action
      v-model="value"
    />

    <div v-show="searchList.length" class="searchList">
      <van-cell
        :title="item.title"
        @click="searchListTap(item.title)"
        v-for="(item, index) in searchList"
        :key="index"
      >
      </van-cell>
    </div>

    <!-- 历史记录 -->
    <div class="search-history">
      <van-cell title="搜索历史">
        <div>
          <span @click="clear">全部删除</span>
        </div>
      </van-cell>
      <van-cell
        :title="item"
        v-for="(item, index) in history"
        :key="item"
        :to="{ path: '/searchList', query: { key_word: item } }"
      >
        <van-icon name="close" @click="del(index)" />
      </van-cell>
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
    </div>
    <!-- /历史记录 -->
  </div>


</template>
<script>
function debounce(fn, t = 500) {
  let timer = null;
  return function (...arg) {
    clearTimeout(timer);
    timer = setTimeout((v) => {
      fn.apply(this, arg);
    }, t);
  };
}

import { Search } from "vant";
export default {
  name: "search",
  data() {
    return {
       hotWord: "你好",//依赖于后端
      value: "", //  输入的内容
      searchList: [],
      history: [], //  放历史记录
    };
  },
  components: {
    [Search.name]: Search,
  },
  created() {
       //  一进来就得判断 历史记录
    let history = localStorage.getItem("history");
    //  1. 第一次来  没搜索过  undefined
    // 2 有记录

    if (history) {
      this.history = JSON.parse(history);
    }
  },
   watch: {
    value(n) {
      if (n.trim().length === 0) {
        this.searchList = [];
      }
    },
  },
  // 挂载后
  mounted() {},
  methods: {
<<<<<<< HEAD
     
  },
};
</script>
<style lang='less' scoped>
.search {
  /*搜索*/
  .top {
    width: 375px;
    height: 46px;
    position: relative;
    svg {
      position: absolute;
      width: 15px;
      height: 15px;
      left: 15px;
      top: 14px;
      color: #666;
    }
    input {
      width: 220px;
      height: 30px;
      margin-top: 6px;
      border: none;
      background: #f7f8fa;
      color: #666;
      padding-left: 30px;
      margin-left: 10px;
    }
    span {
      margin-left: 15px;
    }
  }
  .delhistory {
    width: 360PX;
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;
    /*margin-left: 10px;*/
    span {
      padding: 0 10px;
      color: #a4a4c4;
    }
    .Alldel {
      .delicon {
        svg{
            margin-left: 20px;
             color: #a4a4c4;
=======

 onInput: debounce(function (e) {
      e = e.trim(); //  去掉前后空格
      if (e.length === 0) return;
      this.$http({
      url: '/api/search',
      method: 'POST',
      //传参
      data: {
         key_word: e,
      }
      })
      .then(res => {
      console.log(res)
       if (res.code == 0) {
          this.searchList = res.data;
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
        }
        
      }).catch(err => {
      console.log(err)
      })
    }),


     onSearch(e) {
      e = e.trim(); //  去掉前后空格
      e = e || this.hotWord;
      console.log(e);
      this.searchListTap(e);
    },
    searchListTap(title) {
      let index = this.history.findIndex((v) => v === title); //findIndex查找 用title 和数组每一项进行比较  有一样的 返回索引   没找到 返回-1
      if (index >= 0) {
        this.history.splice(index, 1);
      }
<<<<<<< HEAD
    }
  }
  .conter{
    display: flex;
    flex-direction: row;
    padding-left: 4px;
    justify-content: space-between;
    align-items: center;
    
    
    svg{
         color: #a4a4c4;
           padding-right: 10px;
    }
  }
=======
      this.history.unshift(title);
      localStorage.setItem("history", JSON.stringify(this.history));
      this.$router.push({ path: "/searchList", query: { key_word: title } });
    },
    // 删除某个历史记录
    del(index) {
      this.history.splice(index, 1);
      localStorage.setItem("history", JSON.stringify(this.history));
    },
    //清除所有
    clear() {
      this.history = [];
      localStorage.setItem("history", JSON.stringify(this.history));
    },
  },
};
</script>
<style lang='less' scoped>
.searchList {
  position: fixed;
  left: 0;
  right: 0;
  top: 95px;
  bottom: 0;
  overflow-y: auto;
  z-index: 999;
  background: #fff;
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
}
</style>